<nz-layout>
    <nz-header style="display:flex; justify-content:space-between;">
        <div><h1>Moi Kittos</h1></div>
        <div><button nz-button nzSize="large" nzType="primary" (click)="logout()">Logout</button></div>
    </nz-header>
    <nz-layout>
      <nz-sider style="background-color: white; color: black; padding : 5% 0% 5% 1%; min-width: 18%;">
        <h2>{{userFeed.userName}}</h2>
        <nz-divider></nz-divider>
        <ul nz-menu nzMode="inline" style="width: 100%;">
            <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
            <ng-template #menuTpl let-menus>
              <ng-container *ngFor="let menu of menus">
                <li
                  *ngIf="!menu.children"
                  nz-menu-item
                  [nzPaddingLeft]="menu.level * 24"
                  [nzDisabled]="menu.disabled"
                  [nzSelected]="menu.selected"
                >
                  <i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i>
                  <span>{{ menu.title }}</span>
                  <a (click)="onMenuClick(menu.title)"></a>
                </li>
                <li
                  *ngIf="menu.children"
                  nz-submenu
                  [nzPaddingLeft]="menu.level * 24"
                  [nzOpen]="menu.open"
                  [nzTitle]="menu.title"
                  [nzIcon]="menu.icon"
                  [nzDisabled]="menu.disabled"
                >
                  <ul>
                    <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
                  </ul>
                </li>
              </ng-container>
            </ng-template>
          </ul>
      </nz-sider>
      <nz-content style="background-color: white; color: black; padding : 5% 5% 5% 5%; line-height: 300%;"><router-outlet></router-outlet></nz-content>
    </nz-layout>
    <nz-footer>Powered By Chen Lin</nz-footer>
  </nz-layout>
